<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>jQuery移动端触屏滑动日期控件</title>
<link href="css/mobiscroll.css" rel="stylesheet" type="text/css">
<script src="js/jquery.1.7.2.min.js"></script>
<script src="js/mobiscroll.js" type="text/javascript"></script>
<style type="text/css">
body { padding: 0; margin: 0; font-family: arial, verdana, sans-serif; font-size: 12px; background: #ddd; }
input, select { width: 100%; padding: 5px; margin: 5px 0; border: 1px solid #aaa; box-sizing: border-box; border-radius: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-border-radius: 5px; }
.header { border: 1px solid #333; background: #111; color: white; font-weight: bold; text-shadow: 0 -1px 1px black; background-image: linear-gradient(#3C3C3C, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#3C3C3C), to(#111)); background-image: -moz-linear-gradient(#3C3C3C, #111); }
.header h1 { text-align: center; font-size: 16px; margin: .6em 0; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.content { padding: 15px; background: #fff; }
</style>
</head>
<body class="mkeBody">
<div class="mkeHeadBox">jQuery移动端触屏滑动日期控件</div>
<div class="mkeContentBox">
<!--效果html开始-->
<div class="content">
<div class="demos">
<label for="appDate">日期</label>
<input value="" class="" readonly name="appDate" id="appDate" type="text">
</div>
<div class="demos">
<label for="appDateTime">日期时间</label>
<input value="2015-05-01 15:42:02" class="" readonly name="appDateTime" id="appDateTime" type="text">
</div>
<div class="demos">
<label for="appTime">时间</label>
<input value="16:43" class="" readonly name="appTime" id="appTime" type="text">
</div>
</div>
<script type="text/javascript">
    $(function () {
        var currYear = (new Date()).getFullYear();	
        var opt={};
        opt.date = {preset : 'date'};
        opt.datetime = {preset : 'datetime'};
        opt.time = {preset : 'time'};
        opt.default = {
            theme: 'android-ics light', //皮肤样式 
            display: 'modal', //显示方式 
            mode: 'scroller', //日期选择模式
            dateFormat: 'yyyy-mm-dd',
            lang: 'zh',
            showNow: true,
            nowText: "今天",
            startYear: currYear - 100, //开始年份
            endYear: currYear + 100 //结束年份
        };

        $("#appDate").mobiscroll($.extend(opt['date'], opt['default']));
		
		
        var optDateTime = $.extend(opt['datetime'], opt['default']);
        var optTime = $.extend(opt['time'], opt['default']);
        $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
        $("#appTime").mobiscroll(optTime).time(optTime);
    });
</script>
<!--效果html结束-->
</div>

</body>
</html>